<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食堂随机吃 - 今天吃什么？</title>
    <style>
        /* 保持原有全部样式 */
        body { background: #2c3e50; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: 'Arial', sans-serif; }
        .machine { background: #e74c3c; padding: 30px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.5); border: 5px solid #c0392b; }
        .slot { background: #ecf0f1; width: 300px; height: 100px; margin: 20px; overflow: hidden; position: relative; border: 3px solid #bdc3c7; border-radius: 10px; }
        .reel { position: absolute; width: 100%; transition: top 0.5s ease-out; text-align: center; }
        .item { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #2c3e50; }
        button { background: #27ae60; color: white; border: none; padding: 15px 30px; font-size: 20px; border-radius: 50px; cursor: pointer; transition: 0.3s; margin: 20px; box-shadow: 0 5px #219a52; }
        button:hover { background: #219a52; transform: translateY(2px); box-shadow: 0 3px #1d8349; }
        .floor-select { padding: 10px; font-size: 18px; margin: 20px; border-radius: 5px; }
        h1 { color: #f1c40f; text-shadow: 2px 2px #c0392b; font-size: 2.5em; }
    </style>
</head>
<body>
    <h1>🍚 食堂老虎机 🎰</h1>
    <select class="floor-select" id="floor">
        <option value="1">一楼</option>
        <option value="2">二楼</option>
        <option value="3">三楼</option>
        <option value="random">随机楼层</option>
    </select>
    <div class="machine">
        <div class="slot">
            <div class="reel" id="reel"></div>
        </div>
    </div>
    <button onclick="startSlot()">拉杆开始</button>

    <script>
        const stalls = {
            1: Array.from({length:13}, (_,i) => `一楼档口${i+1}`),
            2: Array.from({length:14}, (_,i) => `二楼档口${i+1}`),
            3: Array.from({length:13}, (_,i) => `三楼档口${i+1}`)
        };

        function playSound(type) {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);
            if(type === 'spin') {
                osc.type = 'square';
                osc.frequency.setValueAtTime(100 + Math.random()*500, ctx.currentTime);
                gain.gain.setValueAtTime(0.3, ctx.currentTime);
            } else {
                osc.type = 'sine';
                osc.frequency.setValueAtTime(880, ctx.currentTime);
                gain.gain.setValueAtTime(0.5, ctx.currentTime);
            }
            osc.start();
            osc.stop(ctx.currentTime + (type === 'spin' ? 3 : 0.5));
        }

        let isSpinning = false;
        const reel = document.getElementById('reel');

        function getRandomFloor() {
            return Math.floor(Math.random() * 3) + 1;
        }

        function initReel(floor) {
            reel.innerHTML = [...stalls[floor], ...stalls[floor]]
                .map(item => `<div class="item">${item}</div>`)
                .join('');
        }

        function startSlot() {
            if (isSpinning) return;
            let floor = document.getElementById('floor').value;
            floor = floor === 'random' ? getRandomFloor() : parseInt(floor);
            initReel(floor);
            isSpinning = true;
            playSound('spin');
            const targetIndex = Math.floor(Math.random() * stalls[floor].length);
            const targetPosition = -targetIndex * 100;
            reel.style.transition = 'none';
            reel.style.top = '-2000px';
            setTimeout(() => {
                reel.style.transition = 'top 3s cubic-bezier(0.1, 0.7, 0.1, 1)';
                reel.style.top = `${targetPosition}px`;
            }, 10);
            setTimeout(() => {
                isSpinning = false;
                playSound('win');
                alert(`今日推荐：${stalls[floor][targetIndex]}\n楼层：${['一','二','三'][floor-1]}楼`);
            }, 3500);
        }
        initReel(1);
    </script>
</body>
</html>